<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <button @click="getEmptyTalk">清空土味情话</button>
        <ul>
            <li v-for="item in talkState.talklist" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>


<script setup lang="ts" name="Page45">
import { onMounted, reactive,ref } from 'vue';
 import axios from 'axios';
import { nanoid } from 'nanoid'

import { useTalkStore } from '../../stores/loveTalk'
const talkState =useTalkStore();
console.log('ss',talkState)

// 订阅
talkState.$subscribe((mutate,state)=>{
    console.log('talkStore里面保存的数据发生了变化',mutate,state)
    localStorage.setItem('talkList',JSON.stringify(state.talklist))
})


const getLoveTalk = async () => {
    let res = await axios.get('https://api.uomg.com/api/rand.qinghua?format?json')
    console.log(res.data.content)
    let obj = { id: nanoid(), title: res?.data?.content ? res?.data?.content : '空~~' }
    talkState.talklist.unshift(obj)    
}
const getEmptyTalk = ()=>{
    talkState.talklist= []
}
onMounted(()=>{
    // console.log('888')
    // talklist.value=[]
})

</script>


<style scoped>
.talk {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

select,
button {
    margin: 0 5px;
    height: 40ppx;
    line-height: 18px;
}
ul{
    text-align: left;
    list-style: none;
}
</style>